page-device-select {

   .content.device-select .scroll-content{
     padding: 0;
     background-color: #f5f5f5;
   }
   .device-module{
     width: 100%;
     margin-bottom: 0.75rem;
     padding-bottom: 1rem;
     background-color: #fff;
   }
   .device-module .device-group-name{
     margin:0;
     padding: 1.75rem 2rem 1rem;
     font-size: 1.5rem;
   }
   .device-message{
     display: flex;
     display: -webkit-flex;
     flex-wrap: wrap;
     justify-content: space-around;
     padding: 0 0.5rem;
   }

   .button-device{
     width: 20%;
     height: 34px;
   }
   .button-device.device-free{
     background-color: $blue;
     border:1px solid $blue;
     color: #fff;
   }

    .button-device.device-off{
     background-color: #fff;
     border:1px solid #afb3b6;;
     color: #afb3b6;;
   }
   .button-device.device-disabled{
     background-color: #efefef;
     color: #878787;
   }
   .button-device {
     width: 21%;
     margin-right: 3%;
     margin-left: 1%;
    }
    .device-message{
       display: block;
       padding: 0 2rem;
    }
    h5{display: inline-block;font-size: 1.7rem!important;}
    .tle{font-size: 1.55rem;color: red;}
    .refresh{
        float: right;
        font-size: 140%;
        border-radius: 4px;
        width: auto;
    }
    
//  .blue{background: #299be4;}
//  .gray{background: #cccdce;}
//  .blue,.gray,.loading{
//      height: 34px;
//      width: 100%!important;
//      margin: 0;
//  }
//  .button-ios.activated{
//      background-color: #cccdce;
//  }
//  .con{
//       width: 21%;
//       margin-right: 3%;
//       margin-left: 1%;
//       display: inline-block;
//       margin-bottom: 10px;
//       vertical-align: middle;
//  }
//  .loading{
//      width: 150px;
//      height: 34px;
//      border-radius: 4px;
//      border: 1px solid #299be4;
//      margin: 0 auto;
//      text-align: center;
//      background: #cccdce;
//      overflow: hidden;
//      position: relative;
//  }
//  .loading .scr{
//      display: inline-block;
//      width: 18%;
//      height: 100%;
//      margin-right: 3.8%;
//      background: #299be4;
//      -webkit-animation: load 2s ease infinite;
//  }
//  .loading .scr:last-child{
//      margin-right: 0px; 
//  }
//  .loading .num{
//      display: flex;
//      align-items: center;
//      justify-content: center;
//      width: 100%;
//      height: 100%;
//      position: absolute;
//      top: 0;
//      font-size: 16px;
//      color: #FFF;
//      z-index: 111;
//  }
//  @-webkit-keyframes load{
//      0%{
//          opacity: 1;
//      }
//      100%{
//          opacity: 0;
//      }
//  }
//  .loading span:nth-child(1){
//      -webkit-animation-delay:0.2s;
//  }
//  .loading span:nth-child(2){
//      -webkit-animation-delay:0.6s;
//  }
//  .loading span:nth-child(3){
//      -webkit-animation-delay:1.0s;
//  }
//  .loading span:nth-child(4){
//      -webkit-animation-delay:1.4s;
//  }
    
    
    .range-ios .range-bar{
        top: 0;
        height: 34px;
        border-radius: 5px;
        background: #cccdce;
    }
    .range-ios .range-bar-active{
        top: 0;
        height: 34px;
        background: #299be4;
    }
    .range-ios .range-knob-handle{
        display: none;
    }
    .range-ios {
        padding: 0!important;
    }
    .range-ios .range-slider {
        height: 34px;
    }
    .range-ios.range-disabled {
        opacity: 1;
    }
    .box{
        width:21%;
        margin: 0px 3% 10px 1%;
        display: inline-block;
    }
    .device-box{
        position: relative;}
    .spanR{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        font-size: 16px;
        color: #FFF;
        z-index: 111;
    }
}
